<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>表格内容</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>

<script>
	/* $(function(){
		
		var map = {};
		var rows = table.rows.length;
		
		var cells = table.rows.item(0).cells.length;
		for (var i = 0; i < rows; i++) {
			var cellValue = [];
			for (var j = 0; j < cells; j++) {
				
				var valuej = table.rows.item(i).cells.item(j).childNodes[0].value;
				cellValue[j] = valuej;
			}
			map[i.toString()] = cellValue;
		}
		var json = JSON.stringify(map);
		
		var params = JSON.stringify(json);
		
		var tableName = $("#tableName").val();
		
		var lll="${ pageContext.request.contextPath }/excel/save";
		console.log(tableName);
	   $.ajax({
			url : lll,
			data : {
				"json" : params,
				"tableName" : tableName
			},
			type : "POST",
			success : function() {
				
			},
			async : true,
			cache : false
		}); 
	}); */
</script>
</head>

<body>
	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>
		<input type="button" class="btn btn-primary" id="tableName" value="${excelTable.tableName}">
		<div style="overflow-x: scroll; width: 100%; white-space: nowrap;padding-top: 20px" >
			<table class="table table-condensed table table-bordered"
				style="width: 100%; height: auto;" id="table">
				<thead>
					<tr class="th"
						style="height: 30px; width: 120px; border: 1px solid;">
						<c:forEach items="${tableColList}" var="tableCol">
							<%-- <td style="width: 120px"><a>${tableCol.colName}</a></td> --%>
							<td class="td" style="width: 5%;height:auto;" ><input
										type="text" onchange="aaa()"
										style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"
										value='${tableCol.colName}'></td>
						</c:forEach>

					</tr>
				</thead>
				<tbody id="tbody">
					<c:forEach begin="1" end="5" step="1">
						<tr class="tr" style="height: 30px;">

							<c:forEach items="${tableColList}" var="tableCol">
								<c:if test="${tableCol.colType==0}">
									<td class="td" style="width: 5%;height:auto;" ><input
										type="text" onchange="aaa()"
										style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"
										value='${ti.defVal}'></td>
								</c:if>
								<c:if test="${tableCol.colType==1}">
									<c:set value="${ fn:split(tableCol.defVal, '||') }" var="val" />
									
									<td class="td" style="width: 5%;height:auto;"><select
										style="width: 100px; height: 30px;background:${fn:substring(val[0],fn:indexOf(val[0],'#'),fn:length(val[0]))} " onchange="aaa(this)">
											<c:forEach items="${val}" var="va">
											
												<option    class="${fn:substring(va,fn:indexOf(va,'#'),fn:length(va))}">
												${fn:substring(va,0,fn:indexOf(va,'#'))}
												</option>
											</c:forEach>
									</select></td>
								</c:if>
							</c:forEach>
						</tr>
					</c:forEach>


				</tbody>
			</table>
		</div>
		<button type="button" class="btn btn-primary"
			onclick="AddRow(document.getElementById('table'),1)">增加一行</button>
		<button type="button" class="btn btn-primary" onclick="aaa()">保存表格</button>


	</div>
</body>
<script type="text/javascript">

	$(function(){
		var map = {};
		var rows = table.rows.length;
		
		var cells = table.rows.item(0).cells.length;
		for (var i = 0; i < rows; i++) {
			var cellValue = [];
			for (var j = 0; j < cells; j++) {
				
				var valuej = table.rows.item(i).cells.item(j).childNodes[0].value;
				cellValue[j] = valuej;
			}
			map[i.toString()] = cellValue;
		}
		var json = JSON.stringify(map);
		
		var params = JSON.stringify(json);
		
		var tableName = $("#tableName").val();
		
		var lll="${ pageContext.request.contextPath }/excel/save";
		
		 var tableId = ${tableId};
		
		   var userId = ${user.id};
		    alert(tableName);  
		  /*  alert("tableName="+tableName+",tableId="+tableId+",userId="+userId); */
		console.log("tableName="+tableName+",tableId="+tableId+",userId="+userId);
	   $.ajax({
			url : lll,
			data : {
				"json" : params,
				"tableName" : tableName
			},
			type : "POST",
			success : function() {
				
			},
			async : true,
			cache : false
		});
	   window.location.href="${ pageContext.request.contextPath }/excel/editTable?tableName="+tableName+"&tableId="+tableId+"&userId="+userId;
	  
	});
	
	
	
function aaa(obj) {
	/* alert(11);
	
	 
	    
	    var index=obj.selectedIndex; //序号，取当前选中选项的序号
	  
	    var ccc=obj.options[index].className;
	     obj.style.background=ccc;
		   
	  
		   
	 */
	
	var map = {};
	var rows = table.rows.length;
	
	var cells = table.rows.item(0).cells.length;
	for (var i = 0; i < rows; i++) {
		var cellValue = [];
		for (var j = 0; j < cells; j++){
			
			var valuej = table.rows.item(i).cells.item(j).childNodes[0].value;
			cellValue[j] = valuej;
		}
		map[i.toString()] = cellValue;
	}
	var json = JSON.stringify(map);
	
	var params = JSON.stringify(json);
	
	var tableName = $("#tableName").val();
	
	var lll="${ pageContext.request.contextPath }/excel/save";
	console.log(tableName);
   $.ajax({
		url : lll,
		data : {
			"json" : params,
			"tableName" : tableName
		},
		type : "POST",
		success : function() {
			alert("更新成功");
		},
		async : true,
		cache : false
	}); 
}

	function showExcel(obj) {
		var filename = obj.value;
		var param = "filename=" + filename;
		console.log(filename);
		$
				.ajax({
					url : "${base}/excel/show",
					data : param,
					dataType : "json",
					type : "POST",
					success : function(data) {
						/*  $('#myModal').modal('show'); */
						var table = [];
						table
								.push('<table class="table table-condensed table table-bordered" style="width:1100px ;height:auto;border:1px solid;"  id="table"><tbody id="tbody">');
						$
								.each(
										data,
										function(index, tr) {
											table
													.push('<tr class="tr" style="height: 30px;width: 50px">');
											$
													.each(
															tr,
															function(index, td) {
																table
																		.push('<td class="td" style="width:50px";height:auto;"><input onchange=\"readHtml()\" type="text" style="border:none;height:35px;font-size: 10px;width:auto;word-wrap:break-word;" value='
																				+ td
																				+ ' ></td>');
															});
											table.push('</tr>');
										});
						table
								.push('<input type="hidden" value='+filename+' id="filename" ></input>');
						document.getElementById('table-body').innerHTML = table
								.join('');
					},
					async : true,
					cache : false
				});
	}
	function AddRow(table, index) {
		var lastRow = table.rows[table.rows.length - 1];
		alert(lastRow);
		var newRow = lastRow.cloneNode(true);
		table.tBodies[0].appendChild(newRow);

		$('#users a').editable();

		$('.status').editable({
			type : 'select',
			title : '请选择完成状态',
			placement : 'right',
			value : 1,
			source : [ {
				value : 1,
				text : '暂无'
			}, {
				value : 2,
				text : '进行中'
			}, {
				value : 3,
				text : '完成'
			} ]
		/*
		//uncomment these lines to send data on server
		,pk: 1
		,url: '/post'
		 */
		});
		return newRow;

	}

	function addRow() {
		var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		tbody.appendChild(tr);
		for (var i = 0; i < cells; i++) {
			var inputi = document.createElement('input');
			inputi.style.border = "none";
			inputi.style.height = "46px";
			inputi.style.font.size = "10px";
			var tdi = document.createElement('td');
			tdi.appendChild(inputi);
			tdi.className = "td";
			tdi.style.height = "46px";
			tdi.style.width = " 5%";
			tr.appendChild(tdi);
		}
	}
	function addCell() {
		$(".tr")
				.append(
						'<td style="height:30px;width:5%"class="td"><input type="text" style="border:none;height:46px;font-size:10px"></td>');
	}
	function readHtml() {
		var map = {};
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		for (var i = 0; i < rows; i++) {
			var cellValue = [];
			for (var j = 0; j < cells; j++) {
				valuej = table.rows.item(i).cells.item(j).childNodes[0].value;
				cellValue[j] = valuej;
			}
			map[i.toString()] = cellValue;
		}
		var json = JSON.stringify(map);
		var params = JSON.stringify(json);

		var filename = $("#filename").val();
		console.log(filename);
		$.ajax({
			url : "${base}/tpl/write",
			data : {
				"json" : params,
				"filename" : filename
			},
			type : "POST",
			success : function() {
				alert("更新成功");
			},
			async : true,
			cache : false
		});
	}
	function deleteExcel(obj) {
		var filename = obj.value;
		var param = "filename=" + filename;
		if (confirm("确认删除" + filename + "吗？")) {
			$.ajax({
				url : "${base}/excel/delete",
				data : param,
				dataType : "json",
				type : "POST",
				success : function(data) {
					//Location.href = "${base}/excel/list";
					alert("删除成功");
					location.reload();
				},
				async : true,
				cache : false
			});
		}
	}
	$(".trr").bind("mouseover", function() {
		$(this).css("background-color", "#eeeeee");
	})
	$(".trr").bind("mouseout", function() {
		$(this).css("background-color", "#ffffff");
	})
</script>
</html>


